<template>
  <div>
    <el-container>
      <el-header class="header">
        <div class="left">
          <img
            src="https://flowbite.com/docs/images/logo.svg"
            alt="Logo"
            class="logo"
          />
          <span class="title">氢氦锂铍硼</span>
        </div>

        <el-tabs
          class="middle"
          v-model="activeName"
          @tab-click="handleClick"
          :tab-position="'top'"
          :stretch="false"
        >
          <el-tab-pane label="首页" name="index"></el-tab-pane>
          <el-tab-pane label="分类" name="category"></el-tab-pane>
          <el-tab-pane label="标签" name="tag"></el-tab-pane>
          <el-tab-pane label="归档" name="archive"></el-tab-pane>
        </el-tabs>

      <div class="right">
           <input style="display:inline-block; height:30px;"  icon="el-icon-search" type="text">
          <span @click="login">登录</span>
      </div>
      </el-header>

      <el-main class="main">
        <router-view />
      </el-main>

      <el-footer>Footer 底部</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "index",
    
    };
  },
  watch: {
    $route(to) {
      this.activeName = to.name;
    },
  },
  methods: {
    login(){
      this.$router.push("/login")
    },
    handleClick(tab) {
      if (this.$route.name === tab.name) {
        return;
      }

      this.$router.push(`/about/${tab.name}`);
    },
  },
  mounted() {
    this.activeName = this.$route.name || "index";
  },
};
</script>

<style scoped>

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 60px;
  background-color: #f5f7fa;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.title {
  font-size: 18px;
  font-weight: 600;
  color: #1890ff;
}
.middle {
  flex: 1;
  margin: 0 30px;
}
::v-deep .el-tabs__nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 60px;
}
::v-deep .el-tabs__item.is-active {
  color: #1890ff;
  font-weight: 500;
}
::v-deep .el-tabs__active-bar {
  background-color: #1890ff;
}
.right {
  display: flex;
  align-items: center;
  gap: 15px;
  width: auto;
  padding: 0 10px;
}
.el-main {
  background-color: #dadada;
  padding: 20px;
  min-height: calc(100vh - 120px);
}
.el-footer {
  background-color: #f5f7fa;
  color: #666;
  line-height: 60px;
  border-top: 1px solid #e8e8e8;
}
</style>